<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加留言</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li {
				list-style: none;
			}
			
			.box {
				width: 600px;
				height: 1200px;
				background: #ccc;
				margin: 20px auto;
			}
			
			.box .header {
				height: 300px;
				border-bottom: 1px solid #999;
			}
			.header textarea {
				width: 200px;
				height: 100px;
				margin-top: 50px;
				margin-left: 50px;
				resize: none;
				outline: none;
				
			}
			button {
				margin-top: -10px;
				outline: none;
				vertical-align: center;
				cursor: pointer;
			}
			.con ul {
				width: 100%;
				height: 100%;
			}
			.con ul li {
				float: left;
				width: 500px;
				margin-left: 50px;
				margin-top: 20px;
				background-color: pink;
			}
			
			.con ul li a {
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="header">
				<textarea name="" rows="" cols=""></textarea>
				<button>发布</button>
			</div>
			<div class="con">
				<ul>
				</ul>
			</div>
		</div>
		
		<script type="text/javascript">
			//获取textarea、按钮、ul元素对象
			var texts = document.querySelector('.header textarea');
			var btn = document.querySelector('.header button');
			var ul = document.querySelector('.con ul');


			if(!texts.value.length) {
				btn.disabled = true;
			}
			
			texts.onblur = function() {
				if(texts.value.length) {
					btn.disabled = false;
				}else{
					btn.disabled = true;
				}
			}
			//把节点添加到ul中
			btn.onclick = function() {
				if(!texts.value.length){
					alert('请输入内容');
					return ;
				} else {
					//创建节点
					var li = document.createElement('li');
					//添加内容
					li.innerHTML = texts.value + '<a href="javascript:void(0);">删除</a>';
//					ul.appendChild(li);
					ul.insertBefore(li,ul.children[0])
					
					//获取a标签元素
					var as = document.querySelectorAll('a');
					
					for(var k = 0; k < as.length; k++) {
						
						as[k].onclick = function() {
							console.log(as)
							//删除当前a标签对应的li
//							ul.removeChild(this.parentNode);
							ul.removeChild(this.parentNode);
						}
					}
				}
				
				
			}
			
			
		</script>
	</body>
</html>
